@use "sass:math";


.main {
  padding-bottom: 10px;
  width: 100%;

  position: relative;
  scroll-behavior: smooth;

  // #d55555 {
  //   scroll-margin-top: 400px;
  // }

 

  .main_bg {
    width: 100%;
    height: 500px;
    position: relative;


    .search {
      width: 50vw;
      height: 200px;
      // background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


    .snows {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      overflow: hidden;
      box-shadow: 3px 3px 5px #fff;

      .snow {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;

        @for $i from 1 through 200 {
          &:nth-child(#{$i}) {
            opacity: math.random() * 0.5 + 0.5;
            $size: math.random() * 10px + 5px;
            width: $size;
            height: $size;
            transform: translate(math.random() * 100vw, -10px) scale(math.random() * 0.5 + 0.5);
            $duration: math.random() * 10s + 10s;
            animation: snow-fall-#{$i} #{$duration} linear infinite -17s;
          }
        }
      }
    }

    // 动画逻辑
    @for $i from 1 through 200 {
      @keyframes snow-fall-#{$i} {
        0% {
          transform: translate(math.random() * 100vw,
              -10px) scale(math.random() * 0.5 + 0.5);
        }


        100% {
          transform: translate(math.random() * 100vw,
              500px) scale(math.random() * 0.5 + 0.5);
        }
      }
    }
  }
  .content{
    margin-top: 20px;
    padding-left:20px;
    width: 100%;
  }
 
}
